import { useState } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Plus, Database } from "lucide-react";
import { useI18n } from "../lib/i18n/context";

interface CreateDatabaseDialogProps {
  onCreateDatabase: (database: any) => void;
}

export function CreateDatabaseDialog({ onCreateDatabase }: CreateDatabaseDialogProps) {
  const { t } = useI18n();
  const [open, setOpen] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    engine: '',
    version: '',
    instanceType: '',
    region: '',
    storage: '',
    masterUsername: '',
    masterPassword: ''
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    const newDatabase = {
      id: `db-${Date.now()}`,
      name: formData.name,
      engine: formData.engine,
      version: formData.version,
      status: 'pending' as const,
      region: formData.region,
      instanceType: formData.instanceType,
      storage: parseInt(formData.storage),
      connections: 0,
      cpu: 0,
      memory: 0,
      createdAt: new Date().toISOString()
    };

    onCreateDatabase(newDatabase);
    setOpen(false);
    setFormData({
      name: '',
      engine: '',
      version: '',
      instanceType: '',
      region: '',
      storage: '',
      masterUsername: '',
      masterPassword: ''
    });
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button className="mb-6">
          <Plus className="h-4 w-4 mr-2" />
          {t.instances.createNew}
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <Database className="h-5 w-5" />
            <span>{t.createDatabase.title}</span>
          </DialogTitle>
        </DialogHeader>
        
        <form onSubmit={handleSubmit} className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Basic Configuration</CardTitle>
            </CardHeader>
            <CardContent className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="name">{t.createDatabase.form.name}</Label>
                <Input
                  id="name"
                  value={formData.name}
                  onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
                  placeholder={t.createDatabase.form.namePlaceholder}
                  required
                />
              </div>
              
              <div>
                <Label htmlFor="engine">{t.createDatabase.form.engine}</Label>
                <Select 
                  value={formData.engine} 
                  onValueChange={(value) => setFormData(prev => ({ ...prev, engine: value }))}
                  required
                >
                  <SelectTrigger>
                    <SelectValue placeholder={t.createDatabase.form.enginePlaceholder} />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="PostgreSQL">PostgreSQL</SelectItem>
                    <SelectItem value="MySQL">MySQL</SelectItem>
                    <SelectItem value="MariaDB">MariaDB</SelectItem>
                    <SelectItem value="Aurora MySQL">Aurora MySQL</SelectItem>
                    <SelectItem value="Aurora PostgreSQL">Aurora PostgreSQL</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="version">{t.createDatabase.form.version}</Label>
                <Select 
                  value={formData.version} 
                  onValueChange={(value) => setFormData(prev => ({ ...prev, version: value }))}
                  required
                >
                  <SelectTrigger>
                    <SelectValue placeholder={t.createDatabase.form.versionPlaceholder} />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="15.4">15.4</SelectItem>
                    <SelectItem value="14.9">14.9</SelectItem>
                    <SelectItem value="13.12">13.12</SelectItem>
                    <SelectItem value="8.0.35">8.0.35</SelectItem>
                    <SelectItem value="5.7.44">5.7.44</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="region">{t.createDatabase.form.region}</Label>
                <Select 
                  value={formData.region} 
                  onValueChange={(value) => setFormData(prev => ({ ...prev, region: value }))}
                  required
                >
                  <SelectTrigger>
                    <SelectValue placeholder={t.createDatabase.form.regionPlaceholder} />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="us-east-1">US East (N. Virginia)</SelectItem>
                    <SelectItem value="us-west-2">US West (Oregon)</SelectItem>
                    <SelectItem value="eu-west-1">Europe (Ireland)</SelectItem>
                    <SelectItem value="ap-southeast-1">Asia Pacific (Singapore)</SelectItem>
                    <SelectItem value="ap-northeast-1">Asia Pacific (Tokyo)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Instance Configuration</CardTitle>
            </CardHeader>
            <CardContent className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="instanceType">{t.createDatabase.form.instanceType}</Label>
                <Select 
                  value={formData.instanceType} 
                  onValueChange={(value) => setFormData(prev => ({ ...prev, instanceType: value }))}
                  required
                >
                  <SelectTrigger>
                    <SelectValue placeholder={t.createDatabase.form.instanceTypePlaceholder} />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="db.t3.micro">db.t3.micro (1 vCPU, 1 GB RAM)</SelectItem>
                    <SelectItem value="db.t3.small">db.t3.small (2 vCPU, 2 GB RAM)</SelectItem>
                    <SelectItem value="db.t3.medium">db.t3.medium (2 vCPU, 4 GB RAM)</SelectItem>
                    <SelectItem value="db.r5.large">db.r5.large (2 vCPU, 16 GB RAM)</SelectItem>
                    <SelectItem value="db.r5.xlarge">db.r5.xlarge (4 vCPU, 32 GB RAM)</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="storage">{t.createDatabase.form.storage}</Label>
                <Input
                  id="storage"
                  type="number"
                  value={formData.storage}
                  onChange={(e) => setFormData(prev => ({ ...prev, storage: e.target.value }))}
                  placeholder="20"
                  min="20"
                  max="65536"
                  required
                />
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Master User Configuration</CardTitle>
            </CardHeader>
            <CardContent className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="masterUsername">Master Username</Label>
                <Input
                  id="masterUsername"
                  value={formData.masterUsername}
                  onChange={(e) => setFormData(prev => ({ ...prev, masterUsername: e.target.value }))}
                  placeholder="admin"
                  required
                />
              </div>

              <div>
                <Label htmlFor="masterPassword">Master Password</Label>
                <Input
                  id="masterPassword"
                  type="password"
                  value={formData.masterPassword}
                  onChange={(e) => setFormData(prev => ({ ...prev, masterPassword: e.target.value }))}
                  placeholder="Enter secure password"
                  required
                />
              </div>
            </CardContent>
          </Card>

          <div className="flex justify-end space-x-2 pt-4">
            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
              {t.createDatabase.buttons.cancel}
            </Button>
            <Button type="submit">
              {t.createDatabase.buttons.create}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}